<template>
  <el-drawer
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    title="系统设置"
    size="375px"
    :append-to-body="true"
  >
    <div class="drawer-content">
      <!-- 主题设置 -->
      <div class="theme-settings">
        <h3>主题</h3>
        <div class="theme-options">
          <base-button
            v-for="item in modeList"
            :type="mode === item.value ? 'primary' : 'default'"
            :icon="item.icon"
            :key="item.value"
            @click="changeTheme(item.value)"
          >
            {{ item.name }}
          </base-button>
        </div>
      </div>

      <!-- 内置主题设置 -->
      <div class="builtin-theme-settings">
        <h3>内置主题</h3>
        <el-row :gutter="20">
          <el-col
            :span="8"
            :xs="12"
            :md="8"
            v-for="theme in themes"
            class="theme-item"
            :key="theme.color"
          >
            <el-button @click="selectTheme(theme)" :class="{ active: theme.color === color }">
              <div :style="{ background: theme.color }" class="theme-preview"></div>
            </el-button>
            <div class="theme-name">{{ theme.name }}</div>
          </el-col>
          <el-col :span="8" class="theme-item">
            <!-- <el-button> -->
            <el-color-picker v-model="primaryColor" show-alpha :predefine="predefineColors" />
            <!-- </el-button> -->
            <div class="theme-name">自定义</div>
          </el-col>
        </el-row>
      </div>

      <!-- 其他设置项（如圆角、布局等） -->
      <!-- ... -->
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
  import { useThemeStore } from '@/stores/themeStore'
  import { storeToRefs } from 'pinia'

  defineProps({
    modelValue: Boolean
  })
  const emit = defineEmits(['update:modelValue'])
  const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577'
  ])

  // 主题选项
  const themes = [
    { name: '默认', color: '#409EFF' },
    { name: '紫罗兰', color: '#7166f0' },
    { name: '樱花粉', color: '#e84a6c' },
    { name: '玫瑰红', color: '#EB2F96' },
    { name: '天蓝色', color: '#4e69fd' },
    { name: '海蓝色', color: '#2d8cf0' },
    { name: '深绿色', color: '#5cb87a' },
    { name: '浅绿色', color: '#8dc63f' },
    { name: '柠檬黄', color: '#f7ba2a' },
    { name: '橙色', color: '#f37b1d' },
    { name: '灰色', color: '#C0C4CC' },
    { name: '黑色', color: '#000000' }
    // 其他主题...
  ]

  // 使用 Pinia 管理主题状态
  const themeStore = useThemeStore()
  const modeList = [
    {
      name: '浅色',
      value: 'light',
      icon: 'Sunny'
    },
    {
      name: '深色',
      value: 'dark',
      icon: 'Moon'
    },
    {
      name: '跟随系统',
      value: 'system',
      icon: 'Ship'
    }
  ]
  const { mode, color } = storeToRefs(themeStore)
  const primaryColor = ref(color.value)

  watch(primaryColor, (val: string) => {
    console.log('primaryColor', val)
    themeStore.setThemeColor(val)
  })
  // 切换主题模式（浅色、深色、跟随系统）
  const changeTheme = (mode: string) => {
    themeStore.setThemeMode(mode as 'light' | 'dark' | 'system')
  }

  // 选择内置主题
  const selectTheme = (theme: any) => {
    themeStore.setThemeColor(theme.color)
  }
</script>

<style scoped lang="scss">
  .theme-settings,
  .builtin-theme-settings {
    margin-bottom: 20px;
    h3 {
      margin-bottom: 10px;
    }

    .theme-item {
      text-align: center;
      .el-button {
        width: 100%;
        height: 44px;
        &.active {
          border-color: var(--el-color-primary);
          background-color: color-mix(in srgb, var(--el-color-primary) 10%, transparent);
        }
      }
      .theme-name {
        padding: 10px;
        font-size: 12px;
      }
    }
  }

  .theme-options,
  .builtin-theme-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .theme-preview {
    /* display: inline-block; */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* margin-right: 5px; */
  }
</style>
